import React, {Component, PropTypes} from 'react';
import { StyleSheet, Text, View, TextInput} from 'react-native';

class Edit extends Component {
    focus() {
        this.refs.input.focus()
    }

    blur() {
        this.refs.input.blur()
    }

    clear() {
        this.refs.input.clear()
    }

    renderTitle() {
        const {title, titleStyle} = this.props;
        if (!title) return;

        return (
            <Text style={[styles.titleStyle, titleStyle]}>
                {title}
            </Text>
        );

    }

    render() {
        const {containerStyle, title, titleStyle, style, ...props} = this.props;
        return (
            <View
                style={[styles.containerStyle,containerStyle]}
            >
                { this.renderTitle() }
                <TextInput
                    ref='input'
                    placeholderTextColor="#888888"
                    { ...props }
                    multiline={false}
                    clearButtonMode='while-editing'
                    underlineColorAndroid="transparent"
                    style={[styles.inputStyle, style]}
                />
            </View>
        )


    }
} //end of Input Component


//todo title和input在竖直方向上有1px的对齐差距
const styles = StyleSheet.create({
    containerStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 15,
        height: 50,
        backgroundColor: 'white',
    },
    inputStyle: {
        flex: 1,
        fontSize: 14,
        paddingVertical: 0,
        borderWidth: 0,
        margin: 0,
        color:'#666666',
        textDecorationLine: 'none',
        backgroundColor: 'white',
    },
    titleStyle: {
        width: 70,
        fontSize: 16,
        paddingVertical: 0,
        borderWidth: 0,
        textDecorationLine: 'none',
        color: '#262626',
        backgroundColor: 'white',
    },
});

const stylePropType = PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.array,
    PropTypes.number
]);
Edit.propTypes = {
    title: PropTypes.string.isRequired,
    style: stylePropType,
    titleStyle: stylePropType,
    containerStyle: stylePropType,
};

module.exports = Edit;
